<template>
  <div>
    <h1>App</h1>
    <div class="content"></div>
    <hr>
    <Header></Header>
  </div>
</template>

<script>
import Header from '@/components/Header'
// 创建并暴漏组件
export default {
  name: 'App',
  components: {
    Header
  }
}
</script>

<style scoped>
/* 
  style标签的scoped属性
      我们在组件的style标签中书写的样式在打包后，其实是可以通用的，也就是不只是能控制自己组件的元素样式（这样并不一定合理）
      我们可以给style标签添加一个scoped属性，则这个style标签中的样式只有对当前组件内的元素生效了

  scoped原理
      首先给当前scoped所在的组件所有结构添加一个自定义属性（如果是组件，则给组件的最外层元素添加）
      给当前scoped所在的style中所有选折起都添加一个属性选择器，属性是当前组件结构中提娜姬的自定义属性
      所以scoped所在的style中的选择器只能选择自己组件的元素或者子组件的最外层元素进行控制
 */
.content {
  width: 200px;
  height: 100px;
  background-color: greenyellow;
}
</style>